<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-Template</title>
    <link rel="stylesheet" href="../css/main.css">
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
    <!-- container -->
    <div id="container"></div>
    <script type="text/babel">
        var Board=React.createClass({
            getInitialState:function(){
                return ({
                    comments:[]
                });
            },
            updateComment:function(newText,i){
                //console.log(newText);
                var arr=this.state.comments;
                arr[i]=newText;
                //update State
                this.setState({comments:arr});
            },
            removeComment:function(i){
                var arr=this.state.comments;
                arr.splice(i,1);
                //update State
                this.setState({comments:arr});
            },
            eachComment:function(text,index){
                return (
                    <Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={index} index={index}>{text}</Comment>
                );
            },
            add:function(text){
                var arr=this.state.comments;
                arr.push(text);
                this.setState({comments:arr});
            },
            render:function(){
                return (
                    <div>
                        <button className="button-info create" onClick={this.add.bind(null,"Default text")}>Add New</button>
                        <div className="board">
                            {
                                this.state.comments.map(this.eachComment)
                            }
                        </div>
                    </div>
                );
            }
        });
        var Comment=React.createClass({
            getInitialState:function(){
                return ({editing:false});
            },
            edit:function(){
                this.setState({editing:!this.state.editing});
            },
            remove:function(){
               this.props.deleteFromBoard(this.props.index);
            },
            renderNormal:function(){
                return (
                    <div className="commentContainer">
                        <div>{this.props.children}</div>
                        <button className="button-primary" onClick={this.edit}>Edit</button>
                        <button className="button-danger" onClick={this.remove}>Remove</button>
                    </div>
                );
            },
            save:function(){
                var val=this.refs.newText.value;
                //console.log("Catch things:"+val);
                this.props.updateCommentText(val,this.props.index);
                this.setState({editing:!this.state.editing});
            },
            renderForm:function(){
                return (
                    <div className="commentContainer">
                        <textarea ref="newText" defaultValue={this.props.children}></textarea>
                        <button className="button-success" onClick={this.save}>Save</button>
                    </div>
                );
            },
            render:function(){
                if(this.state.editing){
                    return this.renderForm();
                }else{
                    return this.renderNormal(); 
                }
                
            }
        });
        ReactDOM.render(
            <Board/>,
            document.getElementById('container')
        );
    </script>
</body>
</html>
